<template>
  <div class="recommend-nav-container">
    <div class="right-item">
      <div @click="changeRecommendList(item.type,item.index)"
           class="recommend-nav-item"
           :class="{active_item:item.type===activeItem}"
           v-for="(item,index) in item"
           :key="index">
        {{ item.name }}
      </div>
    </div>
    <div class="left-item">
      <div class="more-item">更多
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-youjiantou"></use>
        </svg>
      </div>
    </div>
  </div>
</template>

<script>
import '@/assets/font/recommend'

export default {
  name: "RecommendNav",
  data() {
    return {
      activeItem: '',//存储那个nav按钮是活跃状态
    }
  },
  props: {
    item: {
      type: Array
    }
  },
  mounted() {
    if (this.item) {
      this.activeItem = this.item[0].type//如果接收到了item，即为按钮信息，则把第一个按钮设置为活跃状态
    }
  },
  methods: {
    changeRecommendList(type, index) {
      this.bus.$emit('changeRecommendList', type, index)
      this.activeItem = type//点击nav按钮，设置此按钮为活跃状态
    },
  },
}
</script>

<style scoped lang="less">
.recommend-nav-container {
  //width: 80%;
  border-bottom: 2px solid #B2281E;
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
  
  .right-item {
    display: flex;
    padding-bottom: 10px;
    
    .recommend-nav-item {
      height: 30px;
      width: 80px;
      margin: 0 10px;
      font-size: 14px;
      border-radius: 15px;
      text-align: center;
      line-height: 30px;
      transition: all .3s linear;
      color: #AEAEAE;
      cursor: pointer;
      
      &:hover {
        color: #ffffff;
        background-color: rgba(255, 0, 0, 0.53);
        font-size: 18px;
        transform: translateY(-1px);
        box-shadow: 5px 5px 20px rgba(255, 0, 0, 0.53);
      }
    }
    
    .active_item {
      color: #ffffff;
      background-color: rgba(255, 0, 0, 0.53);
      font-size: 18px;
      transform: translateY(-1px);
      box-shadow: 5px 5px 20px rgba(255, 0, 0, 0.53);
    }
  }
  
  .left-item {
    display: flex;
    padding-bottom: 10px;
    
    .more-item {
      height: 30px;
      width: 80px;
      margin: 0 10px;
      font-size: 14px;
      border-radius: 15px;
      text-align: center;
      line-height: 30px;
      transition: all .3s linear;
      color: #AEAEAE;
      
      &:hover {
        color: #ffffff;
        background-color: rgba(255, 0, 0, 0.53);
        font-size: 18px;
        transform: translateY(-1px);
        box-shadow: 5px 5px 20px rgba(255, 0, 0, 0.53);
      }
    }
  }
}
</style>
